<template>
  <div class="common-layout">
    <el-container id="container">
      <el-main>
        <div id="condition">
          <el-select v-model="userFilter" placeholder="请选择用户" style="width: 240px" size="large" clearable>
            <el-option v-for="user in users" :key="user.uid" :label="user.username" :value="user.uid"/>
          </el-select>
          <el-select v-model="movieFilter" placeholder="请选择电影" style="width: 240px" size="large" clearable>
            <el-option v-for="movie in movies" :key="movie.mid" :label="movie.mName" :value="movie.mid"/>
          </el-select>
          <el-radio-group v-model="commentSort" size="small" @change="changeCondition" style="margin-left:800px">
            <el-radio-button value="0">按评论时间排序</el-radio-button>
            <el-radio-button value="1">按打分排序</el-radio-button>
          </el-radio-group>
          <el-button type="success" @click="handleQuery" size="large">查询</el-button>
        </div>
        <div id="tableDiv">
          <el-table
              id="table"
              :data="tableData"
              border
              show-overflow-tooltip
              size="large"
              table-layout="fixed"
              style="text-align: center">
            <el-table-column prop="mcId" label="评论id"/>
            <el-table-column prop="uid" label="用户id"/>
            <el-table-column prop="username" label="用户名"/>
            <el-table-column prop="displayName" label="昵称"/>
            <el-table-column prop="uPic" label="用户头像">
              <template v-slot="{ row }">
                <el-image :src="imgPrefix + row.uPic" fit="cover" style="max-height: 100px;max-width: 100px"/>
              </template>
            </el-table-column>
            <el-table-column prop="mid" label="电影id"/>
            <el-table-column prop="mName" label="电影名称"/>
            <el-table-column prop="mPic" label="电影海报">
              <template v-slot="{ row }">
                <el-image :src="imgPrefix + row.mPic" fit="cover" style="max-height: 100px;max-width: 100px"/>
              </template>
            </el-table-column>
            <el-table-column prop="commentContent" label="评论内容"/>
            <el-table-column prop="commentAt" label="评论时间"/>
            <el-table-column prop="commentScore" label="打分值"/>
            <el-table-column label="操作" fixed="right" width="120">
              <template #default="scope">
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer>
        <div id="pagination">
          <el-pagination
              style="float:right"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :current-page="currentPage"
              :disabled="false"
              :total="totalCount"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              background layout="total, sizes, prev, pager, next, jumper"/>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import {ElNotification, ElMessageBox} from "element-plus";
import {ref, reactive, onMounted, inject} from "vue";
import axios from "axios";
import {request2} from "@/request.js";

const imgPrefix = inject('imgPrefix');

const userFilter = ref(null);
const movieFilter = ref(null);
const currentPage = ref(1);
const pageSize = ref(5);
const totalCount = ref(0);
const tableData = reactive([]);
const users = ref([]);
const movies = ref([]);
const commentSort = ref("0");


const commentQueryDto = reactive({
  uid: userFilter.value,
  mid: movieFilter.value,
  orderByCondition: commentSort.value,
  pageNo: currentPage.value,
  pageSize: pageSize.value,
});

const changeCondition = (val) => {
  commentQueryDto.orderByCondition = val;
}

const handleQuery = () => {
  commentQueryDto.uid = userFilter.value;
  commentQueryDto.mid = movieFilter.value;
  commentQueryDto.orderByCondition = commentSort.value;
  commentQueryDto.pageNo = currentPage.value;
  commentQueryDto.pageSize = pageSize.value;
  request2({
    url: "/comment/admin/list",
    method: "post",
    data: commentQueryDto
  }).then(res => {
    if ('200' === res.code && res.data !== null) {
      console.log("查询评论成功！")
      tableData.splice(0, tableData.length);
      tableData.push(...res.data.list);
      pageSize.value = res.data.pageSize;
      currentPage.value = res.data.pageNo;
      totalCount.value = res.data.totalCount;
    }
  });
};

const handleDelete = (row) => {
  ElMessageBox.confirm('此操作将永久删除该评论, 是否继续?', '提示', {
    type: 'warning'
  }).then(() => {
    axios.post(`/comment/admin/delete/${row.mc_id}`).then(() => {
      handleQuery();
      ElNotification({
        type: 'success',
        message: '删除成功!'
      });
    });
  });
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  commentQueryDto.pageNo = newPage;
  handleQuery();
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1;
  commentQueryDto.pageSize = newSize;
  handleQuery();
};

const fetchUsersAndMovies = () => {
  request2({
    url: "/user/admin/queryAll",
    method: "get",
    data: null
  }).then(res => {
    if ('200' === res.code && res.data !== null) {
      console.log("查询全部用户成功!");
      users.value.push(...res.data);
    }
  });
  request2({
    url: "/movie/selectAll",
    method: "get",
    data: null
  }).then(res => {
    if ('200' === res.code && res.data !== null) {
      console.log("查询全部电影成功!");
      movies.value.push(...res.data);
    }
  });
};

fetchUsersAndMovies();
handleQuery();
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

#condition {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
}

#tableDiv {
  text-align: center;
}

#pagination {
  float: right;
}
</style>
